<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<meta content="yes" name="apple-mobile-web-app-capable">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<meta http-equiv="Access-Control-Allow-Origin" content="*">
	<title>没有授权</title>
	<link rel="stylesheet" href="./css/amazeui.min.css">
	<style>
		html,
		body {
			width: 100%;
			height: 100%;
		}

		#noAuthorization {
			height: 100%;
			width: 100%;
			position: relative;
			padding: 2rem 1rem 1rem;
			display: flex;
			flex-direction: column;
		}

		#noAuthorization .mask {
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			background-color: #ffffff;
			z-index: 99;
		}

		#noAuthorization .mask .center_center {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			font-size: 16px;
			color: #000000;
			z-index: 100;
		}

		#noAuthorization .mask.show .center_center {
			display: none;
		}
		#noAuthorization .mask.none {
			display: none;
		}
		#noAuthorization .mask .dingdingTips {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			font-size: 16px;
			color: #000000;
			z-index: 101;
			display: none;
		}

		#noAuthorization .mask.show .dingdingTips {
			display: block!important;
		}

	

		#noAuthorization .header {
			flex: 1;
		}

		#noAuthorization .body {
			flex: 8;
			position: relative;
		}

		#noAuthorization .body .noAuthorizationBox {
			position: absolute;
			top: 35%;
			transform: translateY(-50%);
			width: 100%;
		}

		#noAuthorization .bottom {
			flex: 1;
			position: relative;
		}

		#noAuthorization .bottom .am-btn {
			background: none;
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
		}

		#noAuthorization .bottom .am-btn:active {
			background: #62bb00;
			color: #ffffff;
			border-color: #ffffff;
		}

		.label {
			padding: 0;
			font-weight: normal;
			padding-top: 0.2em !important;
		}

		#dateTimeDisabled {
			display: none;
		}

		.box p {
			float: left;
			/* font-size: 20px; */
			/* padding-right: 16px;*/
			animation-name: myani;
			animation-duration: 1s;
			animation-iteration-count: infinite;
			animation-timing-function: ease;
			animation-direction: alternate;
			animation-fill-mode: both;
			margin: 0;
		}

		.s1 {
			animation-delay: 0.1s;
		}

		.s2 {
			animation-delay: 0.2s;
		}

		.s3 {
			animation-delay: 0.3s;
		}

		.s4 {
			animation-delay: 0.4s;
		}

		.s5 {
			animation-delay: 0.5s;
		}

		.s6 {
			animation-delay: 0.6s;
		}

		.s7 {
			animation-delay: 0.7s;
		}

		.s8 {
			animation-delay: 0.8s;
		}

		@keyframes myani {

			0% {
				padding-bottom: 0;
			}

			25% {
				transform: translateY(-10px);
			}

			50% {
				padding-bottom: 0;
			}

			75% {
				transform: translateY(-10px);
			}

			100% {
				padding-bottom: 0;
			}
		}
	</style>
</head>

<body>
	<div id="noAuthorization">
		<div class="header am-text-default">
			请认真填写授权对象(即客户名称)及授权时间，一旦提交授权无法修改。
		</div>
		<div class="body">
			<div class="noAuthorizationBox">
				<div class="title am-text-default am-margin-bottom-xl">你将要授权的设备为：<span id="serverName"></span></div>
				<div class="myform">
					<form class="am-form am-form-horizontal" name="form" id="form">
						<div class="am-form-group">
							<label for="object" class="am-u-sm-3 am-form-label am-text-default label">授权对象:</label>
							<div class="am-u-sm-9 inputPadding">
								<input type="text" name="object" id="object" class="am-input-sm" placeholder="输入客户的公司名称"
									id="object">
							</div>
						</div>
						<div class="am-form-group">
							<label for="dateTime" class="am-u-sm-3 am-form-label am-text-default label">授权期限:</label>
							<div class="am-u-sm-9 inputPadding">
								<input type="date" name="date" id="dateTime" class="am-input-sm" placeholder="设备到期时间" disabled>
							</div>
						</div>
						<div class="am-form-group">
							<label for="forever" class="am-u-sm-3 am-form-label am-text-default label"></label>
							<div class="am-u-sm-9 inputPadding">
								<div class="am-checkbox">
									<label class="am-text-default">
										<input type="checkbox" class="foreverCheckBox" checked>永久
									</label>
								</div>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
		<div class="bottom">
			<button type="button" class="am-btn am-btn-default am-btn-block am-radius" id="submitBtn">提交授权</button>
		</div>
		<div class="am-modal am-modal-alert" tabindex="-1" id="myAlert">
			<div class="am-modal-dialog">
				<div class="am-modal-hd">提示</div>
				<div class="am-modal-bd">
					Hello world！
				</div>
				<div class="am-modal-footer">
					<span class="am-modal-btn">确定</span>
				</div>
			</div>
		</div>
		<div class="mask" id="mask">
			<div class="center_center box">
				<p class="s1">正</p>
				<p class="s2">在</p>
				<p class="s3">加</p>
				<p class="s4">载</p>
				<p class="s5">中</p>
				<p class="s6">。</p>
				<p class="s7">。</p>
				<p class="s8">。</p>
			</div>
			<div class="dingdingTips">请使用钉钉扫码</div>
		</div>
	</div>
</body>

</html>
<script src="./js/jquery-3.1.1.min.js"></script>
<script src="./js/amazeui.min.js"></script>
<script src="https://g.alicdn.com/dingding/dingtalk-jsapi/2.10.3/dingtalk.open.js"></script>
<script>
	let url = 'http://www.gonsincloud.com:9999/#device=123&uuid=666';
	let isDingding = false;
	let dingdingModel = {};
	let code = '';
	//添加class
	function addClass(ele, str) {
		// alert('addClass');
		if (ele.className) {
			let oriName = ele.className;
			let newClass = oriName + ' ' + str;
			ele.className = newClass;
		} else {
			ele.className = str;
		}
	}
	//钉钉登录
	function dingdingLogin(code) {
		let url = 'http://' + window.location.host + ':80/api/user/login/dingding';
		$.ajax({
			type: "POST",
			url: url,
			data:{
				code:code
			},
			contentType: "application/x-www-form-urlencoded",
			success: function (res) {
				// alert('登录成功')
				// alert(JSON.stringify(res.data))
				if (res.status == 200) {
					dingdingModel = res.data;
					if(dingdingModel.userid==''){
						window.location.href="./pages/ecode.html"
					}
				}else{
					alert(JSON.stringify(res.data))
				}
			},
			error: function (err) {
				// alert('钉钉登录失败')
				alert('钉钉登录失败:'+JSON.stringify(err));
			}
		});
	}
	// 获取url参数
	function getQueryString(name) {
		let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
		let r = window.location.search.substr(1).match(reg);
		if (r != null) return unescape(r[2]); return null;
	}
	// 保存信息
	function setStroage(licenseKey){
		localStorage.setItem('licenseKey',JSON.stringify(licenseKey));
		localStorage.setItem('dingdingModel',JSON.stringify(dingdingModel));
		let port = {
			uuid:getQueryString('uuid'),
			device:getQueryString('device')
		}
		localStorage.setItem('port',JSON.stringify(port));
		window.location.href='./pages/hasAuthorization.html'
	}
	//发送授权
	function sendAuthorization(model){
		let url = 'http://' + window.location.host + ':80/api/register';
		$.ajax({
			type: "POST",
			url: url,
			data:model,
			contentType: "application/x-www-form-urlencoded",
			success: function (res) {
				// alert(JSON.stringify(res.data));
				if (res.status == 200) {
					code = res.data;
					setStroage(code);
				}
			},
			error: function (err) {
				// alert('发送授权失败')
				alert('发送授权失败:'+JSON.stringify(err))
			}
		});

	}
	dd.ready(function () {
		if (dd.env.platform !== 'notInDingTalk') { // 如果在钉钉环境中
			isDingding = true;
		} else {
			// alert('非钉钉打开')
			let dingding = document.querySelector('#mask');
			addClass(dingding, 'show');
			return false;
		}
		//免授权获取钉钉
		dd.runtime.permission.requestAuthCode({
			corpId: 'ding4308325d72d5a0ab35c2f4657eb6378f', // 企业id
			onSuccess: function (info) {
				let aBox = document.querySelector('#mask');
				addClass(aBox, 'none');
				let myCode = info.code // 通过该免登授权码可以获取用户身份
				//登录获取钉钉信息
				dingdingLogin(myCode);

			},
			onFail: function (err) {
				console.log('钉钉企业验证失败')
				alert('fail: ' + JSON.stringify(err))
				window.location.href = "./pages/ecode.html";
			}
		});
	});
	$(function () {
		//判断钉钉环境
		let showDingding = setTimeout(() => {
			if (!isDingding) {
				// alert('请用钉钉扫码登录');
				let dingding = document.querySelector('#mask');
				addClass(dingding, 'show');
				clearTimeout(showDingding)
				return false;
			} else {
				clearTimeout(showDingding)
			}
		}, 1000);
		//设默认日期为当天
		let $dateTime = $('#dateTime');
		let nowTemp = new Date();
		let nowDay = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0).valueOf();
		let nowMoth = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), 1, 0, 0, 0, 0).valueOf();
		let nowYear = new Date(nowTemp.getFullYear(), 0, 1, 0, 0, 0, 0).valueOf();

		let getDate = new Date();
		let getYear = getDate.getFullYear();
		let getMonths = getDate.getMonth() + 1;
		if (getMonths < 10) {
			getMonths = '0' + getMonths;
		}
		let getDates = getDate.getDate();
		if (getDates < 10) {
			getDates = '0' + getDates;
		}
		let day = getYear + '-' + getMonths + '-' + getDates;
		$dateTime.val(day)

		//设置禁用日期
		let checkin = $dateTime.datepicker({
			theme: 'success',
			onRender: function (date, viewMode) {
				// 默认 days 视图，与当前日期比较
				let viewDate = nowDay;

				switch (viewMode) {
					// moths 视图，与当前月份比较
					case 1:
						viewDate = nowMoth;
						break;
					// years 视图，与当前年份比较
					case 2:
						viewDate = nowYear;
						break;
				}
				return date.valueOf() < viewDate ? 'am-disabled' : '';
			}
		}).on('changeDate.datepicker.amui', function (ev) {
			//选择完日期之后改变input框的值
			let getDate = ev.date;
			let getYear = getDate.getFullYear();
			let getMonths = getDate.getMonth() + 1;
			if (getMonths < 10) {
				getMonths = '0' + getMonths;
			}
			let getDates = getDate.getDate();
			if (getDates < 10) {
				getDates = '0' + getDates;
			}
			let day = getYear + '-' + getMonths + '-' + getDates;
			$dateTime.val(day);
		}).data('amui.datepicker');


		//checkbox永久按钮点击事件
		$('.foreverCheckBox').click(function () {
			//每次点击都要清空日期input框
			$dateTime.val('');
			if ($('.foreverCheckBox').is(':checked')) {
				//日期input框禁止点击
				$dateTime.attr('disabled', true);
			} else {
				//日期input框解除禁止点击
				$dateTime.attr('disabled', false);
				//日期设置为当天
				$dateTime.val(day);
			}
		})

			
		var device = getQueryString('device');
		if(device == "paperless"){
			$("#serverName").html('无纸化服务器');
		}
		
		if(device == "venus"){
			$("#serverName").html('会务服务器');
		}


		//提交按钮点击事件
		$('#submitBtn').click(function () {
			let formModel = {
				username: '',
				date: '',
				userId:'',
				company:'',
				uuid:'',
				device:'',
			}
			if ($('#object').val() == '') {
				$('#myAlert .am-modal-bd').html('请填写授权对象');
				$('#myAlert').modal('open');
				return false;
			}
			if (($dateTime.val() == '') && (!$('.foreverCheckBox').is(':checked'))) {
				$('#myAlert .am-modal-bd').html('请选择授权期限');
				$('#myAlert').modal('open');
				return false;
			}
			//提交的时候判断checkbox是否被选中
			if ($('.foreverCheckBox').is(':checked')) {
				// //被选中了，日期变成永久
				formModel.date = 'forever';
			} else {
				// 没有被选中，日期
				let submitDate = $dateTime.val()
				formModel.date = submitDate.replace(/-/g, "/")

			}
			formModel.company = $('#object').val();
			formModel.uuid = getQueryString('uuid');
			formModel.device = getQueryString('device');
			formModel.username =dingdingModel.name;
			formModel.userId = dingdingModel.userid;
			sendAuthorization(formModel)
		})
	})
</script>